<template>
<div class="container-wrapper">
  <div class="wholeContainer">
    <div class="contentContainer" v-if="total">
      <ForumHeader/>
      <div v-for="(forumIt,index) in forumList" :key="index">
        <ForumItem :forumIt="forumIt" />
      </div>
      <div class="paginationContainer">
        <el-pagination
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="pagination.p"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next,->,jumper,sizes"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-if="!total" class="totalContainer">
        暂无关注，快去浏览论坛吧！
    </div>
  </div>
</div>
</template>

<script>
import ForumItem from '../components/ForumItem.vue'
import ForumHeader from '../components/ForumHeader.vue'
import SearchPart from '../components/SearchPart.vue'
// 导入el-pagination
import { Pagination } from 'element-ui'

export default {
  name: 'Attention',
  components: {
    ForumItem,
    ForumHeader,
    SearchPart,
    [Pagination.name]: Pagination
  },
  data () {
    return {
      hideOnSinglePage: false,
      total: 200,
      pagination: {
        pageSize: 10,
        p: 1
      },
      forumList:[],
      errMsg:''
    }
  },
  mounted(){
    this.$axios({
      method:'get',
      url:`/api/posts/getAttention/${localStorage.getItem('userId')}/${this.pagination.p}/${this.pagination.pageSize}`,
      headers:{
				'Content-Type':'application/json',
				'token':localStorage.getItem('token')
			}
    }).then(res=>{
      console.log(res)
      if(res.data.code==0){
        this.errMsg = res.data.msg
      }else{
        this.forumList = res.data.data.data
      }
      this.total = res.data.data.total

    })
  },
  methods:{
    handleCurrentChange(val){
      console.log(val)
      this.pagination.p = val
      this.$axios({
        method:'get',
        url:`/api/posts/getAttention/${localStorage.getItem('userId')}/${val}/${this.pagination.pageSize}`,
        headers:{
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        }
      }).then(res=>{
        console.log(res)
        if(res.data.code==0){
          this.errMsg = res.data.msg
        }else{
          this.forumList = res.data.data.data
        }
        this.$forceUpdate()

      })
    },
    handleSizeChange(val){
      console.log(val)
      this.pagination.pageSize = val
      this.$axios({
        method:'get',
        url:`/api/posts/getAttention/${localStorage.getItem('userId')}/${this.pagination.p}/${val}`,
        headers:{
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        }
      }).then(res=>{
        console.log(res)
        if(res.data.code==0){
          this.errMsg = res.data.msg
        }else{
          this.forumList = res.data.data.data
        }
        this.$forceUpdate()

      })
    },
    changePage (pager) { // 分页器回调
      this.$emit('change', pager)
    },
    emptyMsg(){
      this.errMsg = ''
    },
    watchIt(val){
      console.log(val)
      this.$axios({
        method:'get',
        url: `/api/posts/search/${val}`,
        headers:{
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        }
      }).then(res=>{
        if(res.data.code==0){
          this.errMsg = res.data.msg
        }else{
          this.forumList = res.data.data
        }
        this.total = res.data.data.length
        this.$forceUpdate();
      })
    },
    goAdd(){
      this.$router.push('/AddForum')
    }
  }
}
</script>

<style scoped>
.container-wrapper{overflow: hidden}
  *{
    background-color:#4b4b4b ;
  }
  .wholeContainer{
    /* 让页面显示全 */
    width: 100%;
    height: 100%;
    min-height: 880px;
    background-color: #4b4b4b;
    overflow-x:hidden ;
    overflow-y: scroll;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 25px;
  }
  .contentContainer{
    width: 100%;
    height: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
    background-color: #4b4b4b;
    
  }
    .paginationContainer{
      width: 46%;
      margin-left: 27%;
      margin-top: 20px;
      height: auto;
    }
    .totalContainer{
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 20px;
        color: #fff;
        margin-top: 20px;
    }
</style>
